// 定义路由组件映射规则
// 01 :导入需要显示的组件
import Home from '@/views/router-view/Home.vue'
import Category from '@/views/router-view/Category.vue';
import Car from '@/views/router-view/Car.vue'
import Mine from '@/views/router-view/Mine.vue'
import Detail from '@/views/router-view/Detail.vue'
import NotFound from '@/views/router-view/Notfind.vue'
import Mine1 from '@/views/router-view/Mine1.vue';
import Mine2 from '@/views/router-view/Mine2.vue'
import Login from '@/views/router-view/Login.vue'

//02: 引入vue-router对象
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
const routes = [
    {
        path: '/', // 跟路径
        //  redirect: '/home' // 重定向到首页(常用)
        redirect: { name: 'home' }
    },
    {
        path: '/home',
        component: Home,
        name: 'home',
        meta: { isshow: true, title: '首页' }
    },
    // { // 仅做了解
    //     path: '/home',
    //     components: {
    //         default: Home, // 默认组件
    //         Category,
    //         Car,
    //     },
    //     name: 'home',
    //     meta: { isshow: true }
    // },
    {
        path: '/category',
        component: Category,
        name: 'category',
        meta: { isshow: true, title: '分类' } // 路由元信息, 就可以在路由中添加任意信息,然后可以在路由对象中访问到该属性
    },
    {
        path: '/car/:id1?/:id2?/:id3?',
        component: Car,
        name: 'car',
        meta: { isshow: true, title: '购物车' },
        // beforeEnter(to, from) {
        //     // 路由独享守卫:只针对当前路由起作用
        //     console.log('to', to);
        //     // 可以直接在购物车页面做一个登录的校验
        //     // let username = localStorage.getItem('username');
        //     // //console.log(username);
        //     // if (to.path != '/login') {
        //     //     // 表示跳转的是 首页 分类 购物车 我的 详情
        //     //     // 这些页面 必须是用户登录后才能访问的
        //     //     if (!username) {
        //     //         alert('请先登录')
        //     //         return { path: '/login' }
        //     //     }
        //     // }

        //     // 如果上一个地址值分类页, 我就不让你跳转
        //     if (from.path == '/category') {
        //         return false
        //     }
        // }

    },
    {
        path: '/mine',
        component: Mine,
        name: 'mine',
        meta: { isshow: true, title: '我的' },
        children: [ // 注意:二级路由组件的坑应该设置在一级路由组件中
            {
                path: '',
                name: 'mine1',
                component: Mine1
            },
            {
                path: '/mine/mine1',  //要不就拼接以及路由地址
                component: Mine1,
                name: 'mine1'
            },
            {
                path: 'mine2',  // 要不地址上不加'/'
                component: Mine2,
                name: 'mine2'
            }
        ]
    },
    {
        path: '/detail',
        component: Detail,
        name: 'detail',
        meta: { isshow: false }
    },
    {
        path: '/login',
        component: Login,
        name: 'login',
        meta: { isshow: false, title: '登录页' }
    },
    // 匹配404 路由
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },

];

// 03: 创建路由对象
// hash模式: 根据url 路径中的hash 值的不同, 匹配不同的组件 (该模式使用不多)语法: createWebHashHistory()
// 特点: 路径中带#,
// history模式: 历史记录模式.
// 热点: 路径中没有# 

const router = createRouter({
    // history: createWebHistory(), // 指定路由模式为历史记录 模式 
    history: createWebHashHistory(), // 指定hash 模式
    routes
})

//hash 模式和history 模式区别:
//01: 地址栏不同, hash 有# history 没有#(常用)
//02: hash 的原理是vue 监听window对象, 使用hashchange 事件监听url中hash 值的改变, 然后渲染不同组件
//   history 原理是vue 监听window, 使用 popstate 事件监听浏览器历史记录的变化, 然后渲染不同的组件

// 03: hash 模式上线时, 不需要服务器做任何处理
// history 需要处理, 需要在后端代码中设置一下重新定


// 04:使用es6 模块化语法进行抛出
export default router


// 添加路由全局守卫
// 全局路由守卫: 只要整个项目中路由发生改变, 都会触发该全局守卫方法,执行里面的回调函数
// router.beforeEach((to, from) => {
//     // to: 表示将要进入的路由对象
//     // from: 将要离开的路由对象
//     // console.log("to", to);
//     // console.log('from', from);
//     // return 返回值如果为false 则中断导航,如果没有return 正常放行
//     // return false
//     // return 返回值还可以是一个新的路由地址: return {path:'/新路径'} 或 return {name:路由名}
//     // return { path: '/home' }

//     // 在路由守卫中验证用户是否登录
//     // 如果有username 表示用户已经登录过了,如果为null 说明没有登录
//     let username = localStorage.getItem('username');
//     console.log(username);

//     if (to.path != '/login') {
//         // 表示跳转的是 首页 分类 购物车 我的 详情
//         // 这些页面 必须是用户登录后才能访问的
//         if (!username) {
//             alert('请先登录')
//             return { path: '/login' }
//         }
//     }
// })


// 使用next方式
// next(): 表示放行,允许导航跳转
// next(新路径) 跳转到新路径
// 如果形参中没有next, 那么不使用next, 使用上一个方式,
// 如果形参中使用了next, 那么只能通过next 实现跳转放行, 没有next(), 就不放行
// router.beforeEach((to, from, next) => {
//     let username = localStorage.getItem('username');
//     //console.log(username);
//     if (to.path != '/login') {
//         // 表示跳转的是 首页 分类 购物车 我的 详情
//         // 这些页面 必须是用户登录后才能访问的
//         if (!username) {
//             alert('请先登录')
//             next('/login')
//         } else {
//             next()
//         }
//     } else {
//         // 表示放行
//         next()
//     }
// })


// 全局后置守卫
// 已经跳转到目标页面执行的守卫, 所有的路由变化都触发
// router.afterEach((to, from) => {
//     // to : 下一个路由信息对象
//     // from: 上一个路由信息对象
//     // console.log('to', to);
//     // console.log(document.title);
//     document.title = to.meta.title

// })